iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
自我挑戰組

JS 加強筆記系列 第 7

Day 07:小練習

  • 分享至 

  • xImage
  •  

1. 程式碼會印出什麼結果?

let promise = new Promise(function(resolve, reject) {
    resolve(1);
    setTimeout(() => resolve(2), 1000);
});

promise.then((result) => {
    console.log(result); // ?
});

solution:1,promise 只應呼叫一次 resolve 或一次 reject,呼叫後其餘的不會再改變 promise 的狀態或結果。

2. 用 promise 包裝 setTimeout

寫出一個 delay 函式,函式接收參數 ms 並回傳一個 promise,該 promise 應在 ms 毫秒後 resolve,也就是可以如以下範例運作:

delay(3000).then(() => {
    console.log('這在三秒後執行');
});

solution:

function delay(ms) {
    return new Promise (resolve => {
        setTimeout(resolve, ms);
    });
}

這題看起來有點多此一舉,不過可以注意的是 setTimeout 的 callback 結構。針對這點 MDN 有一段敘述,它說「用建構式建立 promise」 這件事應該只在處理舊有 callback API 的時候才需要做,因為理想上所有的非同步函式都應該直接回傳 promise。後面它也用了 setTimeout 說明 callback 結構可能造成追蹤、除錯困難,所以最好的做法就是用 promise 把 callback 函式包起來,避免直接呼叫。

延續以上想法,這個問題也可以將原作法中 setTimeout 的部分改用 promise 包起來回傳。


上一篇
Day 06:callback 函式初步改寫
下一篇
Day 08: promise chaining
系列文
JS 加強筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言